<template>
  <div class="hot-city">
    <my-title titleName="热门城市" moreLink="/search"></my-title>

    <div class="hot-city-content">
      <my-ul>
        <my-li class="hot-city-li" v-for="(city, index) in cityList" :key="index" @click.native="$router.push('/cityGuide/' + city.id)">
          <div class="hot-city-img-wrapper">
            <img class="hot-city-img" :src="'static/img/server/city/icon/'+ city.spell + '.jpg'" />
          </div>
          <div class="hot-city-img-title">{{city.name}}</div>
        </my-li>
      </my-ul>
    </div>
  </div>
</template>

<script>
import { fetchPostData } from "@/api/fetch.js";
export default {
  name: "HotCity",
  data() {
    return {
      
    };
  },
  props: ["cityList"],
  components: {},
  mounted() {}
};
</script>

<style lang="stylus" scoped>
.hot-city {
  background-color #fff;
  
  .hot-city-li {
    height: 0;
    padding-bottom: 28%;

    .hot-city-img-wrapper {
      border-radius: 0.18rem;
      overflow: hidden;
      width: 100%;
      padding-bottom: 100%;
      height: 0;
      background-color: #eee;
      margin: 0 auto;

      .hot-city-img {
        width: 100%;
      }
    }

    .hot-city-img-title {
      position: absolute;
      max-width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      z-index: 1;
      color: #eee;
      font-size: 0.45rem;
    }
  }
}
</style>>